<!--
 * @Author: your name
 * @Date: 2020-04-29 16:35:52
 * @LastEditTime: 2020-06-15 16:35:30
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \v1.0.0\pages\work\form_test\form_test.vue
 -->

<template>
    <view>
        <template v-for="(item,index) in jsonData_" >
            <component :is="'kmlc-form-'+item.type" :label="item.label"  :key="index" :em-data="item"  v-model="item.value" @onChangeVal="onChangeVal($event,index)"></component>
        </template>

        <!-- <kmlc-form-select :label="jsonData_[0].label" :options="jsonData_[0].options" :readonly="false"></kmlc-form-select> -->
        <tui-button @click="onSubmit">提交</tui-button>
        <tui-button @click="onReset">重置</tui-button>
    </view>
</template>

<script>
import {jsonData} from './jsonData.js';
const form = require("@/common/framework/libs/formValidation.js")
export default {
    data(){
        return {
            jsonData_:{},
            formData:{},
            types:[{
                type:'string',
                defaultVal:''
            },{
                type:'number',
                defaultVal:0
            },{
                type:'array',
                defaultVal:[]
            },{
                type:'object',
                defaultVal:{}
            }]
        }
    },
    created() {
        console.log(jsonData);
        this.jsonData_ = jsonData && jsonData.list;
    },
    watch:{
        // jsonData_:{
        //     handler:function(val){
        //          console.log('==============watch:',val);
        //     },
        //     deep:true
        // }
    },
    methods: {
        onChangeVal(e,index){
            console.log('formPage:',e,index);
            let {key} = this.jsonData_[index];
            this.formData[key] = e.value;
			
            this.jsonData_[index].options.defaultValue = e;
            
        },
        
        onSubmit(){
            //获取默认值，添加到表单数据里
            //构造验证结构
            let rules = this.jsonData_.map(item=>{
                let {rules,key} = item;
                if(!this.formData[key]){
                    this.formData[key] = item.options.defaultValue;
                }
                return {
                    name:item.key,
                    rule:rules.map(item=>{
                        if('required' in item){
                            return item.required?'required':'';
                        }else{
                           return item.pattern;
                        }
                    }),
                    msg:rules.map(item=>item.message)
                };
            });
            console.log('this.formData:',this.formData);
            let checkRes = form.validation(this.formData, rules);
			if (!checkRes) {
                console.log('checkRes:',checkRes);
				uni.showToast({
					title: "验证通过!",
					icon: "none"
				});
			} else {
				uni.showToast({
					title: checkRes,
					icon: "none"
				});
			}
        },
         // 清空表单
        onReset(){
            this.formData={};
            let temp =this.jsonData_.map(item=>{
                let valType = typeof item.options.defaultValue;
                if(valType =='object'){
                    if(item.options.defaultValue instanceof Array){
                        valType ='array';
                    }
                }
                item.options.defaultValue = this.types.filter(item=>item.type==valType)[0]['defaultVal'];
                return item;
            })
            console.log(this.jsonData_);
            this.jsonData_ = temp; //触发变更
        }
    },
}
</script>